<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import dataURL from "@/assets/images/centerPie.png"

  export default {
    props:{
      id:String
    },
    data() {
      return {
        myChart:null,
        option: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            // orient: 'vertical',
            x: 'center',
            y: 'bottom',
            data: ['男', '女'],
            icon: 'circle',
            itemGap: 20,
            textStyle: {
              padding: [2, 0, 0, 0]
            }
          },
          grid: {
            top: 30,
            bottom: 30,
            left: 100,
            right: 100
          },
          series: [
            // 主要展示层的
            {
              name: '男女比例分析',
              radius: '50%',
              center: ['50%', '50%'],
              type: 'pie',
              labelLine: {
                normal: {
                  show: true,
                  length: 25,
                  length2: 0,
                  lineStyle: {
                    // color: '#f00'
                  },
                  align: 'right'
                },
                color: "#1890ff",
                emphasis: {
                  show: true
                }
              },
              label: {
                normal: {
                  formatter: function (params) {
                    var str = '';
                    switch (params.name) {
                      case '男':
                        str = '{a|}\n{nameStyle|' + params.percent + '%}';
                        break;
                      case '女':
                        str = '{b|}\n{nameStyle|' + params.percent + '%}';
                        break;

                    }
                    return str
                  },
                  rich: {
                    a: {
                      width: 30,
                      height: 30,
                      lineHeight: 40,
                      backgroundColor: {
                        image: dataURL
                      },
                      align: 'center',
                    },
                    b: {
                      width: 30,
                      height: 30,
                      lineHeight: 40,
                      backgroundColor: {
                        image: dataURL
                      },
                      align: 'center',
                    },
                    nameStyle: {
                      color: '#1890ff',
                      align: 'center',
                      padding: [0, 0, 0, 5]
                    }
                  }
                }
              },
              data: [{
                value: 17,
                name: '男',
                itemStyle: {
                  color:'#216DE5'
                }
              },
                {
                  value: 23,
                  name: '女',
                  itemStyle: {
                    color:'#F04864'
                  }
                }
              ],
            },

          ]
        }
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let {id} = this;
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

